<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/hzhbook.css">
    <link rel="stylesheet" href="./css/content.css">
    <link href="//unpkg.com/layui@2.11.5/dist/css/layui.css" rel="stylesheet">
    <title>Document</title>
</head>

<body>
    <div class="all">
        <div class="header">
            <div class="content">
                <div class="left">
                    <a class="study" href="./wenxue.html">磨铁文学</a>
                    <a href="./hzhlaikan.html" class="curr">来看中文网</a>
                    <a href="./jinwenshouye.html">锦文小说网</a>
                    <a href="./momoMain.html">墨墨言情网</a>
                    <a href="./bookIndex.html">逸云书院</a>
                </div>
                <div class="right">
                    <a href="">用户da955a9b</a>
                    <a href="">退出</a>
                    <a href="">消息(<span>0</span>)</a>
                    <span>手机版</span>
                </div>
            </div>
        </div>
        <div class="back">
            <div class="bg">
                <div class="logo"></div>
                <div class="se">
                    <div class="search">
                        <input oninput="newSearch()" type="text" placeholder="找书">
                        <div class="btn">
                            <i></i>
                        </div>
                    </div>
                    <ul class="searchLists">
                    </ul>
                </div>
                <div class="fr">
                    <i></i>
                    我的书架
                </div>
            </div>
        </div>
        <div class="firstnav">
            <ul>
                <li><a href="./hzhlaikan.html">首页</a></li>
                <li  class="first"><a href="./hzhbook.html">书库</a></li>
                <li><a href="./hzhrank.html">排行</a></li>
                <li><a href="./hzhauthor.html">作家专区</a></li>
                <li><a href="./hzhbenefit.html">福利</a></li>
                <li>
                    <a href="./hzhanime.html">动漫</a>
                    <img src=""
                        alt="">
                </li>
            </ul>
        </div>
        <div class="sideMenu">
            <ul>
                <li>
                    <a class="con fle" href="">
                        <i class="f1"></i>
                        <span class="rea read"></span>
                    </a>
                </li>
                <li>
                    <a class="con fle1" href="">
                        <i class="f2"></i>
                        <span class="rea read1"></span>
                    </a>
                </li>
                <li>
                    <a class="con fle2" href="">
                        <i class="f3"></i>
                        <span class="rea read2"></span>
                    </a>
                </li>
            </ul>
            <div class="totop"></div>
        </div>
        <div class="container">
            <div class="leftbar">
                <div class="select">
                    <span>已选</span>
                    <div class="selectlist">
                        <p class="nan">
                            <span>男频</span>
                        </p>
                    </div>
                </div>
                <div class="select">
                    <span>频道</span>
                    <div onclick="sexChange()" class="selectlist">
                        <div class="cont selectTag curr">
                            <a role="button">男频</a>
                        </div>
                        <div class="cont selectTag">
                            <a role="button">女频</a>
                        </div>
                    </div>
                </div>
                <div class="select">
                    <span>分类</span>
                    <div class="selectlist firstType">
                    </div>
                    <div class="second">
                        <div class="se-con">

                        </div>
                    </div>
                </div>
                <div class="select">
                    <span>字数</span>
                    <div class="selectlist allnum">
                    </div>

                </div>
                <div class="select">
                    <span>属性</span>
                    <div class="selectlist free">
                    </div>

                </div>
                <div class="select">
                    <span>状态</span>
                    <div class="selectlist state">
                    </div>

                </div>
                <div class="select">
                    <span>更新时间</span>
                    <div class="selectlist time">
                    </div>

                </div>
            </div>
            <div class="rightbar">
                <div class="head">
                    <div class="hleft">
                        <div class="popRank">
                            <p class="total" onclick="totals(event)">总人气</p>
                            <div onclick="popular(event)" class="tipshow">
                                <p>总人气</p>
                                <p>周人气</p>
                                <p>月人气</p>
                            </div>
                        </div>
                        <div onclick="tab(event)" class="tabs">
                            <p>更新时间</p>
                            <p>推荐票</p>
                            <p>字数</p>
                        </div>
                    </div>
                    <div class="work">共126本作品</div>
                </div>
                <div class="content2">
                    <ul>

                    </ul>
                </div>
                <div class="pagination">
                    <div id="demo-laypage-all"></div>
                </div>
            </div>
        </div>
        <div class="foot">
            <div class="font">
                <a href="">磨铁文学旗下网站：</a>
                <a href="">来看中文网</a>
                <a href="">锦文小说网</a>
                <a href="">墨墨言情网</a>
                <a href="">逸云书院</a>
                <br>
                <a href="">关于我们</a>
                <a href="">联系我们</a>
                <a href="">加入我们</a>
                <a href="">帮助中心</a>
                <a href="">网站地图</a>
            </div>
            <p class="announce">
                Copyright © 2011-2025 LAIKAN.COM All Rights Reserved. 北京来看科技有限公司 版权所有
                <br>
                增值电信业务经营许可证 京B2-20190319 丨 网络出版服务许可证 (署）网出证（京）字第325号 丨
                <a href="">京ICP备17040734号-1</a>
                <br>
                <a href="">网络违法犯罪举报</a>
                <a href="">中国互联网举报中心</a>
                <a href="">网络举报APP下载</a>
                <br>
            </p>
            <div class="blank">
                <a href="">
                    <img src="https://pic.motieimg.com/web-pc-my3/dist/static/img/guohui.d0289dc.png" alt="">
                    <p>京公网安备 11010202009584号</p>
                </a>
            </div>
        </div>
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="//unpkg.com/layui@2.11.5/dist/layui.js"></script>
<script src="./js/hzhbook.js"></script>
<script>
    const newSearch = () => {
        const input = document.querySelector('input')
        const searchLists = document.querySelector('.searchLists')
        if (input.value == '') {
            searchLists.innerHTML = ''
        } else {
            axios.get(`https://app2.motie.com/search?objectType=2&word=${input.value}&pageSize=2`).then(res => {
                let datelist = ''
                searchLists.innerHTML = ''
                res.data.data.bookList.forEach((date1, everys) => {
                    datelist += `
                    <li class="line">
                        <a href="">
                            <img src="${date1.icon}"
                                alt="" class="imgbox">
                            <div class="details">
                                <p class="de-name">${date1.name}</p>
                                <p class="de-author">${date1.authorName}</p>
                            </div>
                        </a>
                    </li>
                `
                })
                searchLists.innerHTML = `
                <li>
                    <a class="about" href="">
                        <i></i> 搜“
                        <span>${input.value}</span>
                        ”相关作品>>
                    </a>
                </li>
                ${datelist}      
            `
            }).catch(err => {
                console.log(err)
            })
        }
    }
    document.addEventListener('click', (event) => {
        const searchLists = document.querySelector('.searchLists');
        const searchContainer = document.querySelector('.se .search'); // 搜索框容器

        // 判断点击位置是否在搜索框或搜索结果内
        const isClickInsideSearch = searchContainer.contains(event.target) ||
            searchLists.contains(event.target);

        // 如果点击在外部且有搜索结果，则隐藏结果
        if (!isClickInsideSearch && searchLists.innerHTML.trim() !== '') {
            searchLists.innerHTML = ''; // 只清空搜索结果，保留输入框内容
        }
    });
    const totop=document.querySelector(".totop")
    totop.addEventListener('click', () => {
  // 平滑滚动到顶部（behavior: 'smooth' 实现平滑效果）
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    });
    const triggerScrollPos = 500;
    window.addEventListener('scroll', function () {
        // 获取当前滚动的垂直距离
        const currentScrollPos = window.scrollY;

        // 判断滚动位置并添加/移除显示类
        if (currentScrollPos > triggerScrollPos) {
            totop.style.display='block'
        } else {
            totop.style.display='none'
        }
    });
    function types(x) {
        axios.get(`https://app2.motie.com/bookcategory/cp/1/tree
        `).then(res => {
            yid = res.data.data[x].id
            const firstType = document.querySelector('.firstType')
            const boy = res.data.data[x].children
            let ta = ''
            firstType.innerHTML = ''
            boy.forEach((item, index) => {
                ta += `
                <div class="selectTag">
                    <a role="button" onclick="jump(event,${index},${x})" >${item.name}</a>
                </div>
            `
            })
            firstType.innerHTML = `
            <div class="selectTag curr">
                <p onclick="seall()">全部</p>
            </div>
            ${ta}
        `
        }).catch(err => {
            console.log(err)
        })
    }
    types(0)
    let inners = '男频'
    const nan=document.querySelector('.selectlist')
    const sexChange = () => {
        inners = event.target.innerHTML
        const sel = document.querySelectorAll('.cont')
        sel.forEach(item1 => {
            if(item1.innerHTML!=event.target.innerHTML){
                item1.classList.remove('curr')
                item1.children[0].style.color=''
            }
        })
        if (event.target.innerHTML == '女频') {
            nan.children[0].innerHTML=event.target.innerHTML
            nan.children[0].style.color='#fff'
            types(1)
        } else if (event.target.innerHTML == '男频') {
            types(0)
            nan.children[0].innerHTML=event.target.innerHTML
            nan.children[0].style.color='#fff'
        }
        setTimeout(function () {
            booktab(yid,k,ytext,yfree,yfinish,ydate,ypopu)
        }, 300)
        event.target.parentNode.classList.add('curr')
        event.target.style.color='#ff4c2f'

    }
    const seall = () => {
        const second = document.querySelector('.second')
        second.style.display = 'none'
        const firstTypes = document.querySelectorAll('.firstType .selectTag')
            firstTypes.forEach(ite3 => {
                ite3.classList.remove('curr')
                ite3.children[0].style.color = '#333'
            })
            event.target.style.color = '#ff4c2f'
            event.target.parentNode.classList.add('curr')
    }
    const newp = document.createElement('p')
    function jump(event, y, z) {
        newp.innerHTML=`
            <span>${event.target.innerHTML}</span>
            <span onclick="deletes(event)" class="del">X</span>
            
        `
        newp.classList.add('nan')
        nan.appendChild(newp)
        axios.get(`https://app2.motie.com/bookcategory/cp/1/tree
        `).then(res => {
            const firstTypes = document.querySelectorAll('.firstType .selectTag')
            firstTypes.forEach(ite3 => {
                ite3.classList.remove('curr')
                ite3.children[0].style.color = '#333'
            })
            event.target.style.color = '#ff4c2f'
            event.target.parentNode.classList.add('curr')
            const second = document.querySelector('.second')
            second.style.display = 'block'
            if (y < 4) {
                second.style.top = '19px'
            } else if (y >= 4 && y < 8) {
                second.style.top = '53px'
            } else if (y >= 8 && y < 12) {
                second.style.top = '87px'
            } else {
                second.style.top = '121px'
            }
            const secon = document.querySelector('.se-con')
            console.log(res.data.data[z].children[y].children)
            const child = res.data.data[z].children[y].children
            secon.innerHTML = ''
            child.forEach((item2,indexes) => {
                const sum=item2.id
                 console.log(sum)
                secon.innerHTML += `
                    <p onclick="childrens(event,${sum},${indexes})">${item2.name}</p>
                `
            })
            res.data.data[z].children.forEach(f=>{
                if(f.name==event.target.innerHTML){
                    yid=f.id
                    booktab(f.id,k,ytext,yfree,yfinish,ydate,ypopu)
                }
            })
        }).catch(err => {
            console.log(err)
        })
    }
    function childrens(e,s){
        yid=s
        booktab(s,k,ytext,yfree,yfinish,ydate,ypopu)

    }
    const list = ['全部', '30万字以下', '30-50万字', '50-100万字', '100-200万字', '200万字以上']
    const allnum = document.querySelector('.allnum')
    let zi = ''
    list.forEach((item3, index) => {
        zi += `
            <div class="selectTag">
                <a role="button" onclick="change(event,${index})" >${item3}</a>
            </div>
        `
    })
    allnum.innerHTML += `
            ${zi}
    `
    const allnumx1 = document.querySelectorAll('.allnum .selectTag')
    allnumx1.forEach((itex, indexs) => {
        if (indexs == 0) {
            itex.children[0].style.color = '#ff4c2f'
            itex.classList.add('curr')
        }
    })
    const newp1 = document.createElement('p')
    const change = (event, index) => {
        newp1.innerHTML=`
            <span>${event.target.innerHTML}</span>
            <span onclick="deletes(event)" class="del">X</span>
            
        `
        newp1.classList.add('nan')
        nan.appendChild(newp1)
        const allnumx = document.querySelectorAll('.allnum .selectTag')
        allnumx.forEach(ite => {
            ite.classList.remove('curr')
            ite.children[0].style.color = '#333'
        })
        event.target.style.color = '#ff4c2f'
        event.target.parentNode.classList.add('curr')
        ytext=index+1
       booktab(yid,k,index+1,yfree,yfinish,ydate,ypopu)
    }
    const list1 = ['全部', '免费', '收费']
    const free = document.querySelector('.free')
    let nofr = ''
    list1.forEach((item3, index) => {
        nofr += `
            <div class="selectTag">
                <a role="button" onclick="nomoney(event,${index})" >${item3}</a>
            </div>
        `
    })
    free.innerHTML += `
            ${nofr}
    `
    const fre = document.querySelectorAll('.free .selectTag')
    fre.forEach((itex1, indexs1) => {
        if (indexs1 == 0) {
            itex1.children[0].style.color = '#ff4c2f'
            itex1.classList.add('curr')
        }
    })
    const newp2 = document.createElement('p')
    function nomoney(e) {
        newp2.innerHTML=`
            <span>${event.target.innerHTML}</span>
            <span onclick="deletes(event)" class="del">X</span>
            
        `
        newp2.classList.add('nan')
        nan.appendChild(newp2)
        const free = document.querySelectorAll('.free .selectTag')
        free.forEach(ite => {
            ite.classList.remove('curr')
            ite.children[0].style.color = '#333'
        })
        event.target.style.color = '#ff4c2f'
        event.target.parentNode.classList.add('curr')
        if(e.target.innerHTML=='收费'){
            yfree=false
            booktab(yid,k,ytext,false,yfinish,ydate,ypopu)
        }else if(e.target.innerHTML=='免费'){
            yfree=true
            booktab(yid,k,ytext,true,yfinish,ydate,ypopu)
        }else{
            booktab(yid,k,ytext,yfree,yfinish,ydate,ypopu)
        }
    }
    const list2 = ['全部', '完本', '连载']
    const state = document.querySelector('.state')
    let sta = ''
    list2.forEach((item4, index4) => {
        sta += `
            <div class="selectTag">
                <a role="button" onclick="states(event,${index4})" >${item4}</a>
            </div>
        `
    })
    state.innerHTML += `
        ${sta}
    `
    const state1 = document.querySelectorAll('.state .selectTag')
    state1.forEach((itex2, indexs2) => {
        if (indexs2 == 0) {
            itex2.children[0].style.color = '#ff4c2f'
            itex2.classList.add('curr')
        }
    })
    const newp3 = document.createElement('p')
    function states() {
        newp3.innerHTML=`
            <span>${event.target.innerHTML}</span>
            <span onclick="deletes(event)" class="del">X</span>
            
        `
        newp3.classList.add('nan')
        nan.appendChild(newp3)
        const state = document.querySelectorAll('.state .selectTag')
        state.forEach(ite => {
            ite.classList.remove('curr')
            ite.children[0].style.color = '#333'
        })
        event.target.style.color = '#ff4c2f'
        event.target.parentNode.classList.add('curr')
        if(event.target.innerHTML=='连载'){
            yfinish=false
            booktab(yid,k,ytext,yfree,yfinish,ydate,ypopu)
        }else if(event.target.innerHTML=='完本'){
            yfinish=true
            booktab(yid,k,ytext,yfree,yfinish,ydate,ypopu)
        }else{
            booktab(yid,k,ytext,yfree,yfinish,ydate,ypopu)
        }
    }
    const lists = ['全部', '三日内', '七日内', '半月内', '一月内']
    const time = document.querySelector('.time')
    let tim = ''
    lists.forEach((item5, index5) => {
        tim += `
            <div class="selectTag">
                <a role="button" onclick="newTimes(event,${index5})" >${item5}</a>
            </div>
        `
    })
    time.innerHTML += `
        ${tim}
    `
    const time1 = document.querySelectorAll('.time .selectTag')
    time1.forEach((itex3, indexs3) => {
        if (indexs3 == 0) {
            itex3.children[0].style.color = '#ff4c2f'
            itex3.classList.add('curr')
        }
    })
    const newp4 = document.createElement('p')
    function newTimes(e,indext) {
        newp4.innerHTML=`
            <span>${event.target.innerHTML}</span>
            <span onclick="deletes(event)" class="del">X</span>
            
        `
        newp4.classList.add('nan')
        nan.appendChild(newp4)
        const time2 = document.querySelectorAll('.time .selectTag')
        time2.forEach(ite => {
            ite.classList.remove('curr')
            ite.children[0].style.color = '#333'
        })
        event.target.style.color = '#ff4c2f'
        event.target.parentNode.classList.add('curr')
        if(indext==0){
            ydate=0
            booktab(yid,k,ytext,yfree,yfinish,0,ypopu)
        }else if(indext==1){
            ydate=3
            booktab(yid,k,ytext,yfree,yfinish,3,ypopu)
        }
        else if(indext==2){
            ydate=7
            booktab(yid,k,ytext,yfree,yfinish,7,ypopu)
        }else if(indext==3){
            ydate=15
            booktab(yid,k,ytext,yfree,yfinish,15,ypopu)
        }else if(indext==4){
            ydate=30
            booktab(yid,k,ytext,yfree,yfinish,30,ypopu)
        }
    }

</script>

</html>